<template>
  <div class="flex justify-between mb-10px">
    <div>
      <span class="mr-10px">应用：</span>
      <Select
        v-model:value="selectReq.appId"
        :allowClear="true"
        :field-names="{ label: 'name', value: 'id' }"
        :options="appSelectList"
        class="mr-10px"
        placeholder="请选择应用"
        style="width: 200px"
        @dropdownVisibleChange="handleAppChange"
      />

      <Button class="mr-10px" @click="handleReset">重置</Button>
      <Button type="primary" @click="getList">查询</Button>
    </div>
    <div>
      <Button v-per="'add'" type="primary" @click="handleAdd">新增套餐</Button>
    </div>
  </div>
  <div>
    <div>
      <Table :columns="columns" :dataSource="instanceList" :pagination="false" bordered class="main-table">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <Popconfirm cancel-text="取消" ok-text="确认" title="是否确认下架" @confirm="changeStatus(record)">
              <a v-if="record.isSubscribed === 0 && record.status === true">
                <DownloadOutlined />
                <Divider type="vertical" />
              </a>
            </Popconfirm>
            <span v-per="'detail'">
              <a @click="handleDetail(record)">
                <EyeOutlined />
                <Divider type="vertical" />
              </a>
            </span>
            <span v-per="'update'">
              <a @click="handleEdit(record)" v-if="record.isSubscribed === 0 && record.status === false">
                <EditOutlined />
                <Divider type="vertical" />
              </a>
            </span>

            <span v-per="'ecsSpecConfiguration'">
              <a @click="handleECS(record)" v-if="record.architecture === '单体'">
                <ToolOutlined />
                <Divider type="vertical" />
              </a>
            </span>

            <a @click="changeStatus(record)" v-if="record.status === false">
              <UploadOutlined />
              <Divider type="vertical" />
            </a>
            <span v-per="'delete'">
              <Popconfirm cancel-text="取消" ok-text="确认" title="是否确认删除?" @confirm="handleDelete(record)">
                <a v-if="record.isSubscribed === 0 && record.status === false"> <DeleteOutlined /> </a
              ></Popconfirm>
            </span>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :show-total="(total) => `共 ${total} 条`"
        :total="total"
        show-size-changer
        @showSizeChange="onShowSizeChange"
      />
    </div>

    <EcsDrawer ref="ecsDrawerRef" @success="successHandler" />
    <InstanceDrawer ref="instanceDrawerRef" @success="successHandler" />
  </div>
</template>

<script lang="ts" setup>
import { Button, Divider, Pagination, Popconfirm, Select, Table } from 'ant-design-vue';
import {
  EditOutlined,
  DeleteOutlined,
  ToolOutlined,
  UploadOutlined,
  DownloadOutlined,
  EyeOutlined,
} from '@ant-design/icons-vue';
import { changePackageStatus, deleteInstance, getInstancePageList } from '/@/api/system-mgmt/instance-mgmt/instance';
import { reactive, ref, watch } from 'vue';
import { columns } from './data';
import { InstanceListItem } from '/@/api/system-mgmt/instance-mgmt/model/instanceModel';
import { useMessage } from '/@/hooks/web/useMessage';
import { getTenantSideApps } from '/@/api/deployment-center/deployTask';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import EcsDrawer from '/@/views/system-mgmt/instance-mgmt/commponent/ecsDrawer.vue';
import InstanceDrawer from '/@/views/system-mgmt/instance-mgmt/commponent/instanceDrawer.vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const instanceDrawerRef = ref();
const ecsDrawerRef = ref();
const { createMessage } = useMessage();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  appId: '',
});

// 获取套餐列表
let instanceList = ref<InstanceListItem[]>([]);

async function getList() {
  let params = {
    size: pageSize.value,
    current: current.value,
    appId: selectReq.appId,
  };
  try {
    let res = await getInstancePageList(params);
    instanceList.value = res.items;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
}

const onShowSizeChange = (current: number, pageSize: number) => {
  selectReq.size = pageSize;
  selectReq.current = current;
  getList();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  getList();
});

// 重置
async function handleReset() {
  selectReq.appId = '';
  await getList();
}

// 新增套餐
function handleAdd() {
  instanceDrawerRef.value.openDrawer(undefined);
}

const handleDetail = (record) => {
  instanceDrawerRef.value.openDetailDrawer(record);
};

// 编辑套餐
function handleEdit(record: Recordable) {
  instanceDrawerRef.value.openDrawer(record);
}

function handleECS(record: Recordable) {
  ecsDrawerRef.value.openDrawer(record.id, record.appId);
}

async function changeStatus(record: Recordable) {
  const res = await changePackageStatus({ status: !record.status, id: record.id });
  await createMessage.info(res);
  getList();
}

// 删除套餐
async function handleDelete(record: InstanceListItem) {
  try {
    const res = await deleteInstance(record.id);
    if (res) {
      createMessage.success('删除套餐信息成功！');
    } else {
      createMessage.error('删除套餐信息失败！');
    }
  } catch (e) {
    createMessage.error('删除套餐信息失败：' + e);
  }
  getList();
}

let appSelectList = ref<AppTemplateResp[]>([]);

// 获取应用列表
async function handleAppChange() {
  await getTenantSideApps().then((res) => {
    appSelectList.value = res;
  });
}

const successHandler = () => {
  getList();
};
// 进入页面后默认执行
// 获取套餐列表
getList();
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
